<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle}">视频平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><text y=\'.9em\' font-size=\'90\'>🎬</text></svg>">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="/" class="logo">🎬 VideoTech</a>
            <ul class="nav-links">
                <li><a href="/">首页</a></li>
                <li><a href="/upload">上传</a></li>
                <li><a href="/search">搜索</a></li>
                <li><a href="/h2-console" target="_blank">数据库</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 页面标题 -->
            <h1 class="page-title">科技视频平台</h1>

            <!-- 统计信息 -->
            <div class="stats-grid" th:if="${stats != null}">
                <div class="stat-card">
                    <div class="stat-number" th:text="${stats.totalVideos}">0</div>
                    <div class="stat-label">总视频数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" th:text="${stats.formattedSize}">0 MB</div>
                    <div class="stat-label">存储容量</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">∞</div>
                    <div class="stat-label">科技感</div>
                </div>
            </div>

            <!-- 搜索框 -->
            <div class="search-container">
                <input type="text" id="searchInput" class="search-input" placeholder="搜索视频...">
                <button class="search-button">🔍</button>
            </div>

            <!-- 错误消息 -->
            <div th:if="${error}" class="message error" th:text="${error}"></div>

            <!-- 视频网格 -->
            <div class="video-grid" th:if="${videos != null and not #lists.isEmpty(videos)}">
                <div class="video-card" th:each="video : ${videos}" th:data-video-id="${video.id}">
                    <div class="video-thumbnail">
                        <div class="play-button">▶</div>
                        🎬
                    </div>
                    <div class="video-info">
                        <h3 class="video-title" th:text="${video.title}">视频标题</h3>
                        <p class="video-description" th:text="${video.description ?: '暂无描述'}">视频描述</p>
                        <div class="video-meta">
                            <span class="video-date" th:text="${#temporals.format(video.uploadTime, 'yyyy-MM-dd')}">2024-01-01</span>
                            <span class="video-size" th:text="${video.fileSize != null ? (#numbers.formatDecimal(video.fileSize / 1024.0 / 1024.0, 1, 1) + ' MB') : '未知'}">0 MB</span>
                        </div>
                        <div class="video-meta">
                            <span th:text="'观看: ' + ${video.viewCount}">观看: 0</span>
                            <span th:text="${video.status}">ACTIVE</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 无视频提示 -->
            <div th:if="${videos == null or #lists.isEmpty(videos)}" class="no-videos">
                <div style="text-align: center; padding: 3rem; color: var(--text-muted);">
                    <div style="font-size: 4rem; margin-bottom: 1rem;">📹</div>
                    <h3>还没有视频</h3>
                    <p>点击上传按钮开始上传您的第一个视频</p>
                    <a href="/upload" class="btn btn-primary" style="margin-top: 1rem;">立即上传</a>
                </div>
            </div>

            <!-- 快速操作 -->
            <div style="text-align: center; margin: 3rem 0;">
                <a href="/upload" class="btn btn-primary">上传视频</a>
                <a href="/search" class="btn btn-secondary" style="margin-left: 1rem;">搜索视频</a>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer style="background: var(--card-bg); padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--border-color);">
        <div class="container" style="text-align: center; color: var(--text-muted);">
            <p>&copy; 2024 VideoTech Platform. 科技感十足的视频平台.</p>
            <p style="margin-top: 0.5rem; font-size: 0.9rem;">
                支持格式: MP4, AVI, MOV, WMV, FLV, WebM, MKV | 最大文件: 500MB
            </p>
        </div>
    </footer>

    <script th:src="@{/js/app.js}"></script>
</body>
</html>
